<template>
	<view class="mine-container">
		<!-- 顶部用户信息 -->
		<view class="user-header" :style="{paddingTop:calculateHeight}">
			<view class="user-info flex-row" @click="goToUserDetail">
				<view class="avatar-container">
					<image :src="userInfo.avatar || '/static/images/mine/ava.svg'" mode="widthFix" class="avatar">
					</image>
					<view class="user-tag" v-if="userInfo.userType">
						{{ userTypeText }}
					</view>
				</view>
				<view class="user-detail">
					<view class="user-name" @tap="goToLogin">{{ userInfo.nickname || '点击登录' }}</view>
					<view class="user-id" v-if="userInfo.userId">ID: {{ userInfo.userId }}</view>
				</view>
			</view>

			<view class="user-actions">
				<view class="action-item" v-if="userInfo.userType === 'member' || userInfo.userType === 'stored'">
					<view class="action-value">{{ userInfo.balance || '0.00' }}</view>
					<view class="action-label">储值余额</view>
					<button class="recharge-btn" @click="recharge">充值</button>
				</view>

				<view class="action-item" v-if="userInfo.rightsCards && userInfo.rightsCards.length > 0">
					<view class="action-value">{{ userInfo.rightsCards.length }}</view>
					<view class="action-label">权益卡</view>
					<navigator url="/pages/cards/my-cards" class="view-btn">查看</navigator>
				</view>
			</view>
		</view>
		<!-- 充值入口 (仅对散客储值用户显示) -->
		<view class="recharge-entry tranlate-num" v-if="showRechargeEntry">
			<view class="recharge-header">
				<text class="recharge-title">储值账户</text>
				<text class="recharge-balance">当前余额: ¥{{ userBalance.toFixed(2) }}</text>
			</view>
			<tap-btn text='充值'></tap-btn>

			<!-- <button class="recharge-btn" @click="showRechargeModal = true">立即充值</button> -->
		</view>
		<!-- 充值弹窗 -->
		<view class="recharge-modal-mask" v-if="showRechargeModal" @click="showRechargeModal = false">
			<view class="recharge-modal" @click.stop>
				<view class="modal-header">
					<text class="modal-title">账户充值</text>
					<text class="modal-close" @click="showRechargeModal = false">×</text>
				</view>

				<view class="recharge-amounts">
					<view class="amount-item" v-for="amount in defaultAmounts" :key="amount"
						@click="selectAmount(amount)">
						<text :class="{ 'active': selectedAmount === amount }">{{ amount }}元</text>
					</view>
				</view>

				<view class="custom-amount">
					<text class="amount-label">自定义金额:</text>
					<input type="number" placeholder="输入金额" v-model="customAmount" @input="handleCustomAmount"
						class="amount-input" />
				</view>

				<view class="recharge-footer">
					<button class="cancel-btn" @click="showRechargeModal = false">取消</button>
					<button class="confirm-recharge-btn" @click="confirmRecharge">确认充值</button>
				</view>
			</view>
		</view>
		<!-- 功能菜单 -->
		<view class="function-menu tranlate-num">
			<view class="menu-section">
				<view class="menu-item justify-between flex-row" @click="goMycard">
					<share-element class="menu-text" key="mycard" transition-on-gesture shuttle-on-pop="to">
						<text class="menu-text " style="">我的权益卡</text>
					</share-element>
				</view>
				<view class="menu-item justify-between flex-row" @click="goToOrderList">
					<share-element class="menu-text" key="order" transition-on-gesture shuttle-on-pop="to">
						<text class="menu-text " style="">预约订单</text>
					</share-element>
				</view>

				<view class="menu-item justify-between flex-row" @click="goToVerificationCode">
					<share-element class="menu-text" key="box" transition-on-gesture shuttle-on-pop="to">
						<text class="menu-text " style="">核销记录</text>
					</share-element>
				</view>

				<view class="menu-item justify-between flex-row" @click="goToRightsCards">
					<text class="menu-text">权益卡购买</text>
				</view>
				<view class="menu-item justify-between flex-row" @click="goTobscalendar">
					<text class="menu-text">日历</text>
				</view>
			</view>

			<view class="menu-section" v-if="userInfo.userType === 'member'">
				<view class="menu-item justify-between flex-row" @click="goToAppointment">
					<text class="menu-text">集团预约管理</text>
				</view>
			</view>

			<view class="menu-section">
				<view class="menu-item justify-between flex-row" @click="goToHelpCenter">
					<text class="menu-text">帮助中心</text>
				</view>

				<view class="menu-item justify-between flex-row" @click="goToSettings">
					<text class="menu-text">设置</text>
				</view>
			</view>
		</view>
		<view class="auth-btn" v-if="isLogin">
			<button class="logout-btn" @click="confirmLogout">退出登录</button>
		</view>
	</view>
</template>

<script>
	import {
		getCurrentInstance
	} from 'vue'
	export default {
		data() {
			return {
				userInfo: {},
				userTypeMap: {
					'guest': '散客',
					'member': '固有会员',
					'stored': '散客储值'
				},
				// 充值相关数据
				userBalance: 0, // 用户余额
				showRechargeEntry: true, // 是否显示充值入口
				showRechargeModal: false, // 是否显示充值弹窗
				defaultAmounts: [100, 200, 500, 1000, 2000], // 默认充值金额
				selectedAmount: 0, // 选中的充值金额
				customAmount: '' // 自定义充值金额
			}
		},

		computed: {
			isLogin() {
				return !!this.userInfo.nickname;
			},

			userTypeText() {
				if (!this.userInfo.userType) return '';
				return this.userTypeMap[this.userInfo.userType] || this.userInfo.userType;
			},

			calculateHeight() {
				// #ifdef VUE3
				const {
					globalProperties: global
				} = getCurrentInstance().appContext.config;
				console.log('global', global.windowInfo.statusBarHeight);
				return `${global.windowInfo.statusBarHeight}px`;
				// #endif
				// #ifdef VUE2
				return `${this.statusHeight}`
				// #endif
			},
		},

		onShow() {
			// 从本地存储获取用户信息
			this.getUserInfo();
		},

		methods: {
			// 获取用户信息
			getUserInfo() {
				const userInfo = uni.getStorageSync('userInfo') || {};
				this.userInfo = userInfo;
			},

			// 前往用户详情
			goToUserDetail() {
				if (!this.isLogin) {
					this.goToLogin();
					return;
				}
				uni.navigateTo({
					url: '/pages/mine/user-detail'
				});
			},

			// 前往登录页
			goToLogin() {
				uni.navigateTo({
					url: '/subPackages/login/index/index',
					routeType:'wx://zoom'
				});
			},

			// 充值
			recharge() {
				if (!this.isLogin) {
					this.goToLogin();
					return;
				}
				uni.navigateTo({
					url: '/pages/mine/recharge'
				});
			},

			// 前往订单列表
			goToOrderList() {
				// if (!this.isLogin) {
				//   this.goToLogin();
				//   return;
				// }
				uni.navigateTo({
					url: '/pages/order/order-list'
				});
			},
			goMycard() {
				// if (!this.isLogin) {
				//   this.goToLogin();
				//   return;
				// }
				uni.navigateTo({
					url: '/pages/mycards/mycards'
				});
			},


			// 前往我的核销码
			goToVerificationCode() {
				// if (!this.isLogin) {
				//   this.goToLogin();
				//   return;
				// }
				uni.navigateTo({
					url: '/pages/records/records'
				});
			},

			// 前往权益卡
			goToRightsCards() {
				uni.navigateTo({
					url: '/pages/cards/index'
				});
			},
			// 前往权益卡
			goTobscalendar() {
				uni.navigateTo({
					url: '/pages/bscalendar/bscalendar'
				});
			},

			// 集团预约管理
			goToAppointment() {
				if (!this.isLogin) {
					this.goToLogin();
					return;
				}
				uni.navigateTo({
					url: '/pages/member/appointment'
				});
			},

			// 帮助中心
			goToHelpCenter() {
				uni.navigateTo({
					url: '/pages/mine/help'
				});
			},

			// 设置
			goToSettings() {
				if (!this.isLogin) {
					this.goToLogin();
					return;
				}
				uni.navigateTo({
					url: '/pages/mine/settings'
				});
			},

			// 确认退出登录
			confirmLogout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							// 清除用户信息
							uni.removeStorageSync('userInfo');
							this.userInfo = {};
							uni.showToast({
								title: '已退出登录',
								icon: 'none'
							});
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mine-container {
		width: 100vw;
		background-color: #f5f5f5;
		min-height: calc(100vh - 120rpx - env(safe-area-inset-bottom));

		.user-header {
			// background: linear-gradient(135deg, #000000, #4f4f4f);
			background: linear-gradient(135deg, #faed00 0%, #fdb218 25%, #d63d2d 60%, #64024d 100%);
			padding: 40rpx 30rpx 80rpx;
			color: #fff;
			position: relative;
			border-radius: 0 0 375rpx 375rpx / 0 0 70rpx 70rpx;
			// &::after{
			// 	content: '';
			// 	position: absolute;
			// 	width: 2000rpx;
			// 	height: 2000rpx;
			// 	left: 50%;
			// 	transform: translate(-50%,0);
			// 	background: #55ffff;
			// 	border-radius: 50%;
			// }

			.user-info {
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;

				.avatar-container {
					position: relative;
					margin-right: 25rpx;

					.avatar {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						border: 5rpx solid rgba(255, 255, 255, 0.3);
					}

					.user-tag {
						position: absolute;
						bottom: 0;
						right: 0;
						background-color: rgba(255, 255, 255, 0.9);
						color: #1a73e8;
						font-size: 22rpx;
						padding: 3rpx 12rpx;
						border-radius: 60rpx;
					}
				}

				.user-detail {
					.user-name {
						font-size: 34rpx;
						font-weight: 500;
						margin-bottom: 10rpx;
					}

					.user-id {
						font-size: 24rpx;
						opacity: 0.8;
					}
				}
			}

			.user-actions {
				display: flex;
				justify-content: space-around;

				.action-item {
					flex: 1;
					text-align: center;
					position: relative;

					&::after {
						content: '';
						position: absolute;
						right: 0;
						top: 10rpx;
						height: 60rpx;
						width: 1rpx;
						background-color: rgba(255, 255, 255, 0.3);
					}

					&:last-child::after {
						display: none;
					}

					.action-value {
						font-size: 32rpx;
						font-weight: bold;
						margin-bottom: 5rpx;
					}

					.action-label {
						font-size: 24rpx;
						opacity: 0.8;
						margin-bottom: 15rpx;
						display: block;
					}

					.recharge-btn,
					.view-btn {
						font-size: 24rpx;
						padding: 5rpx 20rpx;
						height: auto;
						line-height: normal;
						background-color: rgba(255, 255, 255, 0.2);
						color: #fff;
						border-radius: 60rpx;
					}
				}
			}
		}

		.function-menu {
			padding: 20rpx 30rpx;

			.menu-section {
				background-color: #fff;
				border-radius: 16rpx;
				margin-bottom: 20rpx;

				.menu-item {
					display: flex;
					align-items: center;
					padding: 25rpx 30rpx;
					border-bottom: 1rpx solid #f5f5f5;

					&:last-child {
						border-bottom: none;
					}

					.menu-icon {
						width: 40rpx;
						height: 40rpx;
						margin-right: 25rpx;
					}

					.menu-text {
						flex: 1;
						font-size: 28rpx;
						color: #333;
						width: max-content;
					}

					.menu-arrow {
						width: 24rpx;
						height: 24rpx;
						opacity: 0.5;
					}
				}
			}
		}

		.auth-btn {
			padding: 30rpx;

			.login-btn,
			.logout-btn {
				width: 100%;
				height: 90rpx;
				line-height: 90rpx;
				font-size: 30rpx;
				border-radius: 80rpx;
			}

			.login-btn {
				background-color: #1a73e8;
				color: #fff;
			}

			.logout-btn {
				background-color: #fff;
				color: #666;
				border: 1rpx solid #eee;
			}
		}
	}

	.tranlate-num {
		transform: translate(0, -70rpx);
	}

	// 充值入口样式
	.recharge-entry {
		padding: 25rpx 30rpx;
		margin: 0rpx 30rpx 10rpx;
		background-color: #fff;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
		display: flex;
		justify-content: space-between;

		.recharge-header {

			.recharge-title {
				font-size: 28rpx;
				font-weight: 500;
				color: #333;
				margin-bottom: 10rpx;
				display: block;
			}

			.recharge-balance {
				font-size: 26rpx;
				color: #1a73e8;
			}
		}


	}

	// 充值弹窗样式
	.recharge-modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;
		padding: 30rpx;
	}

	.recharge-modal {
		width: 100%;
		max-width: 600rpx;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;

		.modal-header {
			padding: 30rpx;
			border-bottom: 1rpx solid #eee;
			position: relative;

			.modal-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				text-align: center;
				display: block;
			}

			.modal-close {
				position: absolute;
				top: 30rpx;
				right: 30rpx;
				font-size: 36rpx;
				color: #999;
			}
		}

		.recharge-amounts {
			padding: 30rpx;
			display: flex;
			flex-wrap: wrap;
			gap: 20rpx;

			.amount-item {
				width: calc(33.333% - 15rpx);
				height: 90rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1rpx solid #eee;
				border-radius: 8rpx;
				font-size: 28rpx;
				color: #666;
				background-color: #f9f9f9;
				cursor: pointer;

				text.active {
					color: #1a73e8;
					border-color: #1a73e8;
					background-color: #e8f0fe;
					font-weight: 500;
				}
			}
		}

		.custom-amount {
			padding: 0 30rpx 30rpx;
			display: flex;
			align-items: center;

			.amount-label {
				font-size: 26rpx;
				color: #666;
				width: 140rpx;
			}

			.amount-input {
				flex: 1;
				height: 80rpx;
				border: 1rpx solid #eee;
				border-radius: 8rpx;
				padding: 0 20rpx;
				font-size: 26rpx;
			}
		}

		.recharge-footer {
			padding: 20rpx 30rpx 30rpx;
			display: flex;
			gap: 20rpx;

			.cancel-btn,
			.confirm-recharge-btn {
				flex: 1;
				height: 90rpx;
				line-height: 90rpx;
				font-size: 28rpx;
				border-radius: 8rpx;
			}

			.cancel-btn {
				background-color: #f5f5f5;
				color: #666;
			}

			.confirm-recharge-btn {
				background-color: #1a73e8;
				color: #fff;
			}
		}
	}
</style>